<template>
  <!-- <dv-full-screen-container> -->
  <div>
    <fullscreen :fullscreen.sync="fullscreen">
      <div class="dashboard_box">
        <div class="content_box flex-x flex-space" v-init-screen-h="0">
          <div class="left_box flex-y flex-space">
            <div class="left_top_box flex-x flex-evenly">
              <div class="roll_box flex-y flex-center" ref="roll">
                <el-progress
                  type="circle"
                  :width="rollWidth"
                  stroke-linecap="butt"
                  :stroke-width="8"
                  :percentage="70"
                  color="#5554F6"
                ></el-progress>
                <div class="roll_remark">设备利用率</div>
              </div>
              <div class="roll_box flex-y flex-center">
                <el-progress
                  type="circle"
                  :width="rollWidth"
                  stroke-linecap="butt"
                  :stroke-width="8"
                  :percentage="97"
                  color="#016DF3"
                ></el-progress>
                <div class="roll_remark">计划完成率</div>
              </div>
              <div class="roll_box flex-y flex-center">
                <el-progress
                  type="circle"
                  :width="rollWidth"
                  stroke-linecap="butt"
                  :stroke-width="8"
                  :percentage="0"
                  color="#984DFF"
                ></el-progress>
                <div class="roll_remark">故障报警率</div>
              </div>
            </div>
            <div class="left_btm_box">
              <div style="padding: 8px 0 8px 15px" class="flex-x">
                <MyTitle title="当前执行批次" />
              </div>
              <Leftbottom :taskList="runTaskList"> </Leftbottom>
            </div>
          </div>
          <div class="mid_box flex-y flex-space">
            <div style="width:100%;height: 13%;">
              <Middletop></Middletop>
            </div>
            <div style="width:100%;height: 86%;">
              <Middlebottom :taskList="taskList"></Middlebottom>
            </div>
          </div>
          <div class="right_box flex-y flex-space">
            <div class="right_top_box">
              <div style="padding: 8px 20px 8px 15px" class="flex-x flex-space">
                <MyTitle title="累计能耗" />
                <i @click="toggle" class="el-icon-full-screen"></i>
              </div>
              <Righttop></Righttop>
            </div>
            <div class="right_btm_box">
              <div style="padding: 8px 0 8px 15px" class="flex-x">
                <MyTitle title="当前告警" />
              </div>
              <Rightbottom></Rightbottom>
            </div>
          </div>
        </div>
      </div>
    </fullscreen>
  </div>
</template>

<script>
import Leftbottom from "./components/leftBottom.vue";
import Middlebottom from "./components/middleBottom.vue";
import Middletop from "./components/middleTop.vue";
import Righttop from "./components/rightTop.vue";
import Rightbottom from "./components/rightBottom.vue";
import { generateId } from "@/utils";
import MyTitle from "./components/DTitle.vue";
import { getTaskDownLoadInfos } from "@/api/deviceOperation";
export default {
  components: {
    MyTitle,
    Leftbottom,
    Rightbottom,
    Middlebottom,
    Righttop,
    Middletop
  },
  watch: {
    // 有bug 晚点改
    "$store.state.app.sidebar.opened"() {
      setTimeout(() => {
        this.brder1Key = generateId();
      }, 300);
    }
  },
  computed: {
    // boxWidth() {
    //   return this.$store.state.app.sidebar.opened
    //     ? "calc(100% - 54px)"
    //     : "100%";
    // },
  },
  data() {
    return {
      fullscreen: false,
      brder1Key: generateId(),
      rollWidth: 100,
      taskList: [],
      runTaskList: [],
      timer: null,
      numberList: []
    };
  },
  created() {},
  mounted() {
    this.getBaseNum();
    clearInterval(this.timer);
    this.getAllTaskList();
    this.getTaskList();
    this.setTimer();
    this.$nextTick(() => {
      this.rollWidth = this.$refs.roll.clientWidth;
      this.$store.commit("app/CLOSE_SIDEBAR", false);
    });
    window.onresize = () => {
      return (() => {
        this.rollWidth = this.$refs.roll.clientWidth;
      })();
    };
  },
  destroyed() {
    // 每次离开当前界面时，清除定时器
    clearInterval(this.timer);
    this.timer = null;
  },
  methods: {
    setTimer() {
      if (this.timer == null) {
        this.timer = setInterval(() => {
          this.getTaskList();
          this.getAllTaskList();
        }, 30000);
      }
    },
    toggle() {
      this.fullscreen = !this.fullscreen;
    },
    getAllTaskList() {
      getTaskDownLoadInfos({
        manufactureSite: "常规单元"
      }).then(res => {
        this.taskList = [];
        const { data } = res;
        let saveData = [...data.results];
        saveData.forEach((item, index) => {
          item.index = index + 1;
        });
        if (saveData.length < 20) {
          for (let i = 0; i < 5; i++) {
            this.taskList = [...this.taskList, ...saveData];
          }
        } else {
          this.taskList = [...saveData];
        }
      });
    },
    getTaskList() {
      getTaskDownLoadInfos({
        manufactureSite: "常规单元"
        // taskStatus: "3"
      }).then(res => {
        this.runTaskList = [];
        const { data } = res;
        let saveData = this.getNewArr(data.results);
        saveData.forEach((item, index) => {
          item.index = index + 1;
          item.num = this.getNum(index);
        });
        if (saveData.length < 20) {
          for (let i = 0; i < 5; i++) {
            this.runTaskList = [...this.runTaskList, ...saveData];
          }
        } else {
          this.runTaskList = [...saveData];
        }
      });
    },
    //生成随机数，展示用
    getNum(index) {
      if (index) {
        return this.numberList[index];
      } else {
        let a = Math.random() * 100;
        if (a < 40) {
          return Math.trunc(a + 30);
        } else if (a > 80) {
          return Math.trunc(a - 20);
        } else {
          return Math.trunc(a);
        }
      }
    },
    //生成随机数，展示用
    getBaseNum(num) {
      this.numberList = [];
      for (let i = 0; i < 100; i++) {
        this.numberList.push(this.getNum());
      }
    },
    //每台设备只留一条数据，展示用
    getNewArr(arr) {
      let deviceArr = [];
      let indexArr = [];
      let newArr = [];
      for (let item of arr) {
        deviceArr.push(item.deviceToken);
      }
      for (let i = 0; i < deviceArr.length; i++) {
        if (deviceArr.indexOf(deviceArr[i]) == i) {
          indexArr.push(i);
        }
      }
      for (let index of indexArr) {
        newArr.push(arr[index]);
      }
      return newArr;
    }
  }
};
</script>

<style scoped lang="scss">
@import "~@/styles/mixin.scss";
.content_box {
  width: 100%;
  height: 100%;

  .left_box {
    width: 22.5%;
    height: 100%;

    .left_top_box {
      width: 100%;
      height: 35%;
      background: #17203f;

      .roll_box {
        height: 100%;
        text-align: center;
        width: 27%;

        .roll_remark {
          margin-top: 25px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #bcdbe9;
        }
        /deep/ .el-progress path:first-child {
          // 修改进度条背景色
          stroke: #091224;
        }
        /deep/ .el-progress__text {
          // 修改进度条文字提示颜色
          color: #bcdbe9;
        }
      }
    }

    .left_btm_box {
      width: 100%;
      height: 64%;
      background: #17203f;
    }
  }

  .mid_box {
    width: 54%;
    height: 100%;
    background: #17203f;
  }
  .right_box {
    width: 22.5%;
    height: 100%;

    .right_top_box {
      width: 100%;
      height: 35%;
      background: #17203f;
    }

    .right_btm_box {
      width: 100%;
      height: 64%;
      background: #17203f;
    }
  }
}

.dashboard_box {
  position: relative;
  padding: 10px;
  color: #fff;
  background: #091224;

  /deep/ .border-box-content {
    overflow: hidden;
  }
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  &::-webkit-scrollbar-track-piece {
    background-color: inherit !important;
    -webkit-border-radius: 0em;
    -moz-border-radius: 0em;
    border-radius: 0em;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #5dcbff;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
  }
  /* ::-webkit-scrollbar {
    width: 12px !important;
    height: 12px;
  } */
  &::-webkit-scrollbar-corner {
    /* background-color: #5dcbff; */
    display: none;
  }
}
</style>
